<template>
	<view class="body">
		<scroll-view class="rigth hh100" scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
			@scrolltolower="loadmore" style="margin-top: 20px;">
			<view class="pb40" v-if='data.pagination.data.length > 0'>
				<view class="list d-b-c f-w pl30 pr30">
					<view class="item mb20" v-for="(item, index) in data.pagination.data" :key="index"
						@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
						<image :src="item.image" mode="widthFix" class="ww100"></image>
						<view class="bg-white p10">
							<view class="name f26 vertical">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<up-empty marginTop="20vh" mode="list" v-else></up-empty>
		</scroll-view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',

	active: 0,
	status: "loadmore",
	list: [{
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image'
	}]
})

function setAct(e) {
	data.active = e
}
function goTo(url) {
	uni.switchTab({
		url: url
	});
}
async function getGoodsList(page = 1, list_rows = 12) {
	data.loadStatus = 'loading';
	const res = await store.dispatch('request', {
		url: store.state.api.goods.index,
		data: {
			list_rows,
			page,
			is_new: 1,
		}
	})
	if (res.code == 1) {
		let couponList = data.pagination.data.concat(res.data.data);
		data.pagination = {
			...res.data,
			data: couponList,
		};

		if (data.pagination.current_page < data.pagination.last_page) {
			data.loadStatus = 'more';
		} else {
			data.loadStatus = 'noMore';
		}
	}

}
// 加载更多
function loadmore() {
	if (data.loadStatus !== 'noMore') {
		getGoodsList(data.pagination.current_page + 1);
	}
}
onLoad(async (options) => {
	getGoodsList();
});
onReachBottom(() => {
	loadmore();
});
</script>

<style scoped lang="scss">
.select {
	flex-direction: row-reverse;
}

.list {
	.item {
		border: 1px solid #ccc;
		width: calc(50% - 5rpx);

		.img {
			height: 200rpx;
			position: relative;

			image {
				width: 100rpx;
			}

			.tags {
				position: absolute;
				bottom: 20rpx;
				left: 10rpx;
			}
		}

		.subs {
			color: #FBE5CB;
		}
	}
}

.menu {
	.item {

		.name {
			border-right: 1px solid #eee;

			.n1 {
				position: relative;

				&:after {
					content: "";
					position: absolute;
					width: 100%;
					height: 15rpx;
					background-color: #CFE0F7;
					left: 0;
					bottom: 0;
					z-index: -1;
				}
			}

			.n2 {
				position: relative;

				&:after {
					content: "";
					position: absolute;
					width: 100%;
					height: 15rpx;
					background-color: #FBE5CB;
					left: 0;
					bottom: 0;
					z-index: -1;
				}
			}

			.n3 {
				position: relative;

				&:after {
					content: "";
					position: absolute;
					width: 100%;
					height: 15rpx;
					background-color: #FFCFCF;
					left: 0;
					bottom: 0;
					z-index: -1;
				}
			}
		}

		.icon {
			width: 80rpx;
		}
	}
}
</style>